<template>
  <div>
    <tou></tou>
    <div class="box">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部分类</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="fen">
        分类
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部"></el-tab-pane>
            <el-tab-pane
              :label="item.category_name"
              v-for="(item, index) in list"
              :key="index"
            ></el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </div>
    <div class="box2">
      <div class="box3">
        <div
          class="one"
          v-for="(item, index) in good"
          :key="index"
          @click="$router.push('/details?productID=' + item.product_id)"
        >
          <img
            :src="'http://106.15.179.105:3000/' + item.product_picture"
            alt=""
          />
          <p class="p1">{{ item.product_name }}</p>
          <p class="p2">{{ item.product_title }}</p>
          <p class="p3">
            <span class="span1">{{ item.product_selling_price }}元</span
            ><span class="span2">{{ item.product_price }}元</span>
          </p>
        </div>
        <div class="fen">
          <el-pagination
            background
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
            @next-click="next"
            @prev-click="prev"
            @current-change="current"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <fot></fot>
  </div>
</template>

<script>
import tou from '@/components/header.vue'
import fot from '@/components/footer.vue'
import { getCategory, getAll, getgoods, README } from '@/api/login.js'

export default {
  components: { tou, fot },
  data() {
    return {
      activeName: '',
      list: [],
      currentPage: 1,
      pageSize: 15,
      total: 0,
      good: [],
    }
  },
  mounted() {
    this.activeName = this.$store.state.goods
    this.geet()
    this.getgood()
    this.getlis()
  },
  methods: {
    handleClick() {
      if (this.activeName == 0) {
        this.$store.commit('goods', this.activeName)
        this.getlis()
      } else {
        this.currentPage = 1
        this.$store.commit('goods', this.activeName)
        this.getgood()
      }
    },
    async geet() {
      let res = await getCategory()
      this.list = res.data.category
    },
    // 总数据
    async getlis() {
      let res = await getAll({
        categoryID: [],
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
      console.log(res)
      this.good = res.data.Product
      this.total = res.data.total
    },
    // 分散的数据
    //
    async getgood() {
      let a = Number(this.activeName.split(''))
      let arr = []
      arr.push(a)
      let res = await getgoods({
        categoryID: [arr],
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
      this.good = res.data.Product
      this.total = res.data.total
    },
    next() {
      this.currentPage++
      this.getlis()
    },
    prev() {
      this.currentPage--
      this.getlis()
    },
    current(e) {
      this.currentPage = e
      this.getlis()
    },
    tab() {
      console.log('e')
    },
  },
  computed: {},
}
</script>

<style scoped lang="scss">
.box {
  width: 1400px;
  margin: 0 auto;
  .el-breadcrumb {
    margin-top: 20px;
    font-size: 18px;
  }
  .fen {
    display: flex;
    font-size: 18px;
    align-items: center;
    .el-tabs {
      margin-top: 16px;
      margin-left: 8px;
    }
  }
}
.box2 {
  width: 100%;
  background: #f5f5f5;
  padding-top: 10px;
  .box3 {
    width: 1400px;
    margin: 0 auto;
    padding: 10px 10px;
    display: flex;
    flex-wrap: wrap;
    .one {
      z-index: 1;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      width: 200px;
      height: 250px;
      background: #fff;
      padding: 30px;
      text-align: center;
      margin-left: 10px;
      cursor: pointer;
      margin: 6px 6px;

      img {
        width: 124px;
        height: 146px;
      }
      .p1 {
        font-size: 18px;
        color: #333333;
        font-weight: 400;
      }
      .p2 {
        font-size: 16px;
        color: #b0b0b0;
        margin: 4px 0px;
      }
      .p3 {
        font-size: 20px;
        .span2 {
          text-decoration: line-through;
          color: #b0b0b0;
          margin: 0px 6px;
        }
        .span1 {
          color: #ff6700;
          margin: 0px 6px;
        }
      }
    }
    .tow {
      z-index: 1;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      width: 264px;
      height: 346px;
      background: #fff;
      text-align: center;
      margin-left: 10px;
      margin-bottom: 16px;
      line-height: 346px;
      cursor: pointer;

      p {
        font-size: 24px;
      }
      p:hover {
        color: rgb(248, 128, 16);
      }
    }

    .one:hover {
      z-index: 2;
      -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      -webkit-transform: translate3d(0, -2px, 0);
      transform: translate3d(0, -2px, 0);
    }
    .tow:hover {
      z-index: 2;
      -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      -webkit-transform: translate3d(0, -2px, 0);
      transform: translate3d(0, -2px, 0);
    }
    .fen {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
